<template>
  <div class="app-container">
    <el-scrollbar style="height: 100%;">
      <div class="echarts-item" style="margin-top: 50px;">
        <div class="echarts-title">
          {{ echartsData.all.title }}
        </div>
        <el-row :gutter="15" class="echarts-row" style="height: 380px;">
          <el-col :span="24">
            <line-bar-pie :echartsData="echartsData.all"></line-bar-pie>
          </el-col>
        </el-row>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
  import LineBarPie from '@/components/echarts/LineBarPie'  //客服
  export default {
    mounted() {
      this.$store.commit('rdefaultActive', 'khfb')
    },
    components: {
      LineBarPie,
    },
    data() {
      return {
        n: 2,
        echartsData: {
          all: {
            title: '按用水类型分的客户分布',
            dataset: [
              ['product', '2018-04','2018-05','2018-06','2018-07','2018-08','2018-09','2018-10','2018-11','2018-12','2019-01','2019-02','2019-03','2019-04'],
              ['商业', 40993.94,42906.02,43205.94,38595.93,40616.36,40701.45,39103.25,40761.9,42836.73,40765.16,42468.92,40528.01,43071.56],
              ['工业', 524281.57,548735.64,552571.45,493612.89,519452.61,520540.91,500101.07,521314.02,547849.53,521355.65,543145.46,518322.68,550852.77],
              ['建筑洗车', 94065.65,98453.16,99141.37,88563.13,93199.25,93394.51,89727.23,93533.22,98294.17,93540.69,97450.18,92996.52,98833.01],
              ['特业', 71232.47,74554.97,75076.13,67065.62,70576.38,70724.24,67947.14,70829.28,74434.58,70834.94,73795.45,70422.86,74842.62],
              ['生活', 128623.98,134623.39,135564.44,121099.92,127439.27,127706.27,122691.69,127895.94,134406,127906.15,133251.93,127162.06,135142.79],
              ['行政', 17102.85,17900.57,18025.7,16102.39,16945.32,16980.82,16314.04,17006.04,17871.67,17007.4,17718.21,16908.46,17969.64]
            ],
            unitName: ['km³'],
            yAxis: [
              {
                name: '水量(km³)',
                formatter: '{value}'
              }
            ]
          },
        }
      }
    },
    methods: {}
  }
</script>

<style scoped>

</style>
